<template>
    <div>
    <div class="register-head">创建账号</div>
    <div class="register">
        <div class="register-contain">
            <div class="register-tab">
                <div class="register-tab-item" @click="leftTab" :class="{'tab-show':current==0}">邮箱注册</div>
                <div class="register-tab-item" @click="rightTab" :class="{'tab-show':current==1}">手机号注册</div>
            </div>
            <div v-if="current==1">
                <div class="email-form">
                    <input class="email-account" type="text" placeholder="请输入手机号" v-model="mobile"/>
                    <input class="password" type="password" placeholder="设置密码，最短6位" v-model="password"/>
                </div>
                <div class="sms-code">
                    <input class="sms-input" type="text" placeholder="请输入验证码" v-model="smsCode">
                    <div class="sms-get" style="cursor: pointer" @click="getSmsCode(5)" v-if="waitTime == 0">获取验证码</div>
                    <div class="sms-get" v-if="waitTime != 0">{{waitTime}}秒后再次获取</div>
                </div>
            </div>
            <div v-if="current==0">
            <div class= "email-form">
                <input class="email-account" type="text" placeholder="请输入邮箱" v-model="email"/>
                <input class="password" type="password" placeholder="设置密码，最短6位" v-model="password"/>
            </div>
            </div>
            <div class="register-content">
                点击创建账户，表示同意
                <a href=https://www.baidu.com/>用户协议</a>
            </div>
            <div style="text-align: center">
                <Button long class="resgister-buuton" @click="register">创建账号</Button>
                <Divider size="small" class="divider">第三方应用登录</Divider>
                <dive class="oauth">
                    <img class="imgCss" src="../../../assets/loginPic/github.png" @click="jump('github')">
                </dive>
            </div>
        </div>
        </div>
        <div class="login">
            <div class="login-tips">已有账号？</div>
            <router-link to="login" style="color: cadetblue">登录</router-link>
        </div>
    </div>
</template>

<script>
    import store from "@/store/store";

    export default {
        name: "register.vue",
        data(){
            return{
                email:'',
                password:'',
                mobile:'',
                smsCode:'',
                current: 0,
                waitTime:0,
            }
        },
        methods:{
            leftTab() {
                this.current = 0;
            },
            rightTab(){
                this.current = 1;
            },
            jump(e){
                switch (e) {
                    case 'github':
                        window.location.href= "https://github.com/login/oauth/authorize?client_id=2c595d69f41e2f662bec&redirect_uri=http://localhost:8080/#/auth/login"
                }
            },
            getSmsCode(wait){
                let _this =this;
                this.waitTime = wait;
                _this.getSeconds()
            },
            getSeconds(){
                let _this =this
                if(this.waitTime == 0);
                else {
                    this.waitTime--;
                    setTimeout(function() {
                            _this.getSeconds();
                        },
                        1000);
                }
            },
            register(){
                store.commit('addAcc',this.email,this.password)
            }
        }
    }
</script>

<style scoped>
    .register{
        width: 382px;
        position: relative;
        left: 50%;
        top: 37px;
        -ms-transform: translate(-50%);
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        background-color: #fff;
        border: 1px solid #eee;
        padding-bottom: 30px;
        display: block;
    }
    .register-head{
        font-size: 24px;
        color: #808083;
        text-align: center;
        margin-top: 50px;
    }
    .register-contain{
        width: 100%;
    }

    .register-tab{
        text-align: center;
        height: 59px;
        width: 380px;
        display: flex;
        -webkit-font-smoothing: antialiased;
        cursor: pointer;
    }
    .register-tab-item {
        -webkit-box-flex: 1;
        -ms-flex: 1 1;
        flex: 1 1;
        height: 59px;
        line-height: 59px;
        color: #808083;
        font-size: 20px;
        background-color: #eee;

    }
    .tab-show{
        background-color: white;
    }
    .email-form{
        margin-top: 34px;
        width: 300px;
        position: relative;
        left: 50%;
        -ms-transform: translate(-50%);
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
    }
    .password{
        margin-top: 17px;
    }
    input {
        text-align: left;
        text-indent: 13px;
        font-size: 14px;
        color: #000;
        width: 300px;
        height: 40px;
        border: 1px solid #cacaca;
        border-radius: 6px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        outline-width: 3px;
        outline-color: rgba(38,95,131,0.93);
    }
    .register-content{
        height: 17px;
        margin-top: 17px;
        font-size: 12px;
        color: #808083;
        letter-spacing: -.09px;
        line-height: 17px;
        text-align: center;
        position: relative;
    }
    .resgister-buuton{
        margin-top: 10px;
        width: 300px;
        height: 40px;
        background-color: rgba(38, 95, 131, 0.93);
        color: white;
    }
    .divider{
        padding-top: 20px;
        font-size: 8px;
        color: #808083;
        letter-spacing: -.09px;
        position: relative;
    }
    .oauth{
        cursor: pointer;
    }
    .imgCss{
        height: 40px;
        width: 40px;
    }

    .sms-code{
        width: 300px;
        margin-top: 17px;
        height: 40px;
        position: relative;
        left: 50%;
        -ms-transform: translate(-50%);
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
    }
    .sms-input{
        left: 0;
        width: 160px;
        position: relative;
        float: left;
    }
    .sms-get{
        left: 187px;
        width: 150px;
        height: 40px;
        position: absolute;
        line-height: 40px;
        font-size: 14px;
        text-align: left;
    }
    .login{
        margin-top: 50px;
        text-align: center;
    }


</style>
